<template>
  <div class="container">
    <div class="course-top">
      <my-search :placeholder="placeholder" @search="mySearch"></my-search>
      <div class="selectWrapper">
        <div class="select">
          班级筛选：
          <el-select v-model="value1" placeholder="请选择" @change="classChange">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="select">
          状态筛选：
          <el-select v-model="value2" placeholder="请选择" @change="typeChange">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="tip">上架和下架</div>
      <el-button class="add" @click="handleAdd">添加</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="80px"></el-table-column>
        <el-table-column width="110px" prop="course_name" label="课程"></el-table-column>
        <el-table-column width="110px" prop="course_class_name" label="所属班级"></el-table-column>
        <el-table-column width="110px" prop="course_type_name" label="类型"></el-table-column>
        <el-table-column width="130px" prop="course_cover_url" label="课程封面">
          <template slot-scope="scope">
            <img :src="scope.row.course_cover_url" alt class="course-cover" />
          </template>
        </el-table-column>
        <el-table-column width="110px" prop="offline_box_photo" label="盒子封面">
          <template slot-scope="scope">
            <img :src="scope.row.offline_box_photo[0]" alt class="offline-box" />
          </template>
        </el-table-column>
        <el-table-column width="110px" prop="course_start_time" label="上课时间"></el-table-column>
        <el-table-column width="150px" prop="updated_at" label="编辑时间"></el-table-column>
        <el-table-column class="table-btn" label="操作">
          <template slot-scope="scope">
            <el-button class="editor" @click="handleEdit(scope)">编辑</el-button>
            <el-button
              class="sold-out"
              @click="soldOut(scope)"
            >{{scope.row.is_putaway == 1 ? '下架' : '上架'}}</el-button>
            <el-button class="delete" @click="delCourse(scope)">删除</el-button>
            <el-checkbox class="free-class" :checked="scope.row.is_free == 0 ? false : true"  @change="hanleCheckChange(scope)">免费试听</el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      class="pagination"
      :total="total"
      @currentChange="currentChange"
      :pageSize="pageSize"
      :currentPage="currentPage"
    ></Pagination>
  </div>
</template>
<script>
import MySearch from "@/common/input/index";
import { getCourseList, soldOut, delCourse, freeCourse } from "@/api/operation";
import { ERR_OK } from "@/api/config";
import Pagination from "@/common/pagination/pagination";
import { Message } from "element-ui";
export default {
  data() {
    return {
      ckecked: '',
      is_putaway_flag: '',
      id: "",
      type: 0,
      placeholder: "请输入课程名称",
      total: 0,
      pageSize: 15,
      page: 1,
      currentPage: 1,
      options1: [
        {
          value: "1",
          label: "萌芽班"
        },
        {
          value: "2",
          label: "小草班"
        },
        {
          value: "3",
          label: "灌木班"
        },
        {
          value: "4",
          label: "大树班"
        }
      ],
      value1: "",
      options2: [
        {
          value: "1",
          label: "上架"
        },
        {
          value: "2",
          label: "下架"
        }
      ],
      value2: "",
      tableData: []
    };
  },
  methods: {
    hanleCheckChange(scope) {
      console.log(scope.row.id)
      this._freeCourse(scope.row.id)
    },
    mySearch(courseName) {
      this.page = 1;
      this.currentPage = 1;
      this.type = 0;
      this.id = "";
      this._getCourseList(
        this.pageSize,
        this.page,
        this.id,
        this.type,
        courseName
      );
    },
    typeChange(type) {
      console.log(type);
      this.page = 1;
      this.type = type;
      this.currentPage = 1;
      // this.id = ''
      this._getCourseList(this.pageSize, this.page, this.id, type);
    },
    classChange(id) {
      this.page = 1;
      this.currentPage = 1;
      this.id = id;
      // this.type = 0
      this._getCourseList(this.pageSize, this.page, id, this.type);
    },
    soldOut(scope) {
      // console.log(scope.row.id);
      this._soldOut(scope.row.id);
    },
    currentChange(val) {
      this.page = val;
      this.currentPage = val;
      this._getCourseList(this.pageSize, this.page, this.id, this.type);
    },
    handleAdd() {
      this.$router.push({ path: "/course/courselist/addcourse" });
    },
    handleEdit(scope) {
      this.$router.push({ path: `/course/courselist/courseedit/${scope.row.id}` });
    },
    delTableDataItem(id) {
      let index = this.tableData.findIndex(item => {
        return item.id === id;
      });
      if (index >= 0) {
        this.tableData.splice(index, 1);
        this.total -= 1;
      }
    },
    delCourse(scope) {
      this._delCourse(scope.row.id);
      // console.log(scope)
    },
    changeIsPutaway(id) {
      let index = this.tableData.findIndex(item => {
        return item.id === id;
      });
      if (index >= 0) {
        this.tableData[index].is_putaway =
          this.tableData[index].is_putaway == 1 ? 2 : 1;
          this.is_putaway_flag = this.tableData[index].is_putaway == 1 ? '上架成功' : '下架成功'
      }
    },
    _freeCourse(id) {
      freeCourse(id)
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    _delCourse(id) {
      delCourse(id)
        .then(res => {
          if (res.code == ERR_OK) {
            Message({
              message: "删除成功!",
              type: "info"
            });
            //删除tableData中元素
            this.delTableDataItem(id);
          }
          // console.log(res)
        })
        .catch(err => {
          console.log(err);
        });
    },
    _soldOut(id) {
      soldOut(id)
        .then(res => {
          // console.log(res);
          this.changeIsPutaway(id)
          if (res.code == ERR_OK) {
            Message({
              message: this.is_putaway_flag,
              type: "info"
            });
            // console.log(res)
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _getCourseList(pageSize, page, classId, type, courseName) {
      getCourseList(pageSize, page, classId, type, courseName)
        .then(res => {
          if (res.code == ERR_OK) {
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.list_num;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this._getCourseList(this.pageSize, this.page);
  },
  components: {
    MySearch,
    Pagination
  }
};
</script>
<style lang="scss" scoped>
@import "@/common/scss/index.scss";
.container {
  padding: 20px;
  padding-top: 50px;
  margin-bottom: 50px;
}
.course-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tip {
  width: 100px;
  height: 40px;
  line-height: 20px;
  background-color: rgba(174, 18, 23, 1);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0);
  color: #fff;
  line-height: 40px;
  font-size: 14px;
  left: 999px;
  font-family: Roboto;
}
.editor {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #fff;
}
.sold-out {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: #ddd;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #444;
}
.delete {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: #ddd;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #444;
}
.table {
  margin-bottom: 50px;
}
.table /deep/ .has-gutter {
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
}
.selectWrapper {
  display: flex;
  .select {
    margin-right: 20px;
  }
}
.add {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #fff;
  position: absolute;
  right: 20px;
}
.input-wrapper {
  padding-left: 0;
}
.free-class {
  display: block;
  margin-top: 10px;
}
.table /deep/ .el-table__row {
  text-align: center;
  .course-cover {
    display: inline-block;
    width: 109px;
    height: 64px;
  }
}
.table /deep/ .el-table__row {
  text-align: center;
  .offline-box {
    display: inline-block;
    width: 66px;
    height: 60px;
  }
}
.pagination {
  @include hCenter();
}
</style>
